import React, { ChangeEvent } from 'react';
import { Button, Form, Input, message, Radio } from 'antd';

import { callsummary } from 'seats/servers/servers';
import { JSONObject } from 'seats/schema/common';

// 布局 详见react anti 文档
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
// 布局
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

/**
 * IProps 传参
 */
interface IProps {
  callRecordId: string;
}

/**
 * IStates 状态
 */
interface IStates {
  /** 提交状态*/
  loadingTag: boolean;
}

class CallSummary extends React.Component<IProps, IStates> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      loadingTag: false,
    };
    this.onFinish = this.onFinish.bind(this);
    this.onFinishFailed = this.onFinishFailed.bind(this);
    this.inputChange = this.inputChange.bind(this);
  }

  /**
   * input输入监听
   */
  inputChange(e: ChangeEvent<HTMLInputElement>, id: string) {
    console.log(id);
  }

  /**
   * form表单提交
   */
  async onFinish(values: JSONObject) {
    this.setLoading(true);
    const { callRecordId } = this.props;
    console.log('Success:', values);
    try {
      const result = await callsummary({ callRecordId, ...values });
      this.setLoading(
        false,
        result.code === 0
          ? () => {
              message.success('提交成功');
            }
          : () => {}
      );
    } catch (e) {
      this.setLoading(false);
    }
  }

  /**
   * 设置请求loading tag
   */
  setLoading(tag: boolean, fn?: any) {
    setTimeout(
      () => {
        this.setState({
          loadingTag: tag,
        });
        fn && fn();
      },
      !tag ? 1000 : 0
    );
  }

  /**
   * form表单没有通过验证
   */
  onFinishFailed(errorInfo: any) {
    console.log('Failed:', errorInfo);
  }

  componentDidMount(): void {}

  componentDidUpdate(prevProps: any): void {
    if (prevProps.callRecordId !== this.props.callRecordId) {
    }
  }

  render() {
    return (
      <div className="box-cont">
        <div className="box-tit">通话小结</div>
        <Form
          className="form-box"
          {...layout}
          name="basic-2"
          initialValues={{ visitResult: true, marketingResult: true }}
          onFinish={this.onFinish}
          onFinishFailed={this.onFinishFailed}
        >
          <Form.Item key="visitResult" label="成访结果" name="visitResult">
            <Radio.Group>
              <Radio value={true}>成功</Radio>
              <Radio value={false}>失败</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item key="marketingResult" label="营销结果" name="marketingResult">
            <Radio.Group>
              <Radio value={true}>成功</Radio>
              <Radio value={false}>失败</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="备注" name="remarks">
            <Input.TextArea maxLength={400} showCount={true} className="textArea" />
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Button type="primary" loading={this.state.loadingTag} htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default CallSummary;
